<template>
	<div class="bg">
		<div class="hotlist">
			<span class="img" v-for='item in cainixihuan'>
				<img :src="item.imgUrl" alt="">
			</span>
			<span class="hotlist_title">
				猜你喜欢
			</span>
			
		</div>
		<div class="list">
			<ul>
				<li v-for='item in cainixihuanList'>
					<div class="left">
						<img :src="item.imgUrl" alt="">
					</div>
					<div class="right">
						<div class="right_top">
							{{item.title}}
						</div>
						<div class="right_bottom">
							<span class="right_bottom_1">
								<i>
								{{item.yuan}}
								</i>起
							</span>
							<span class="right_bottom_2">
								{{item.address}}
							</span>
						</div>
					</div>
				</li>
			</ul>
		</div>
	</div>
</template>
<script type="text/javascript">
	export default {
		props:['cainixihuan','cainixihuanList']
	}
</script>
<style type="text/css" scoped>
	.hotlist{
		background: none !important;
		position: relative;
	    padding: .24rem 0 .26rem;
	    color: #212121;
	    font-size: .28em;
	    line-height: 1;
	}
	.img img{
		display: inline-block;
	    overflow: hidden;
	    width: .3rem;
	    height: .3rem;
	    margin-left: .2rem;
	}
	.hotlist_title{
		display: inline-block;
	    margin-left: .08rem;
	    height: .44rem;
	    color: #212121;
	    font-size: .32rem;
	    line-height: .44rem;
	}
	.list ul{
		margin-left: .24rem;
		list-style: none;
		color: #212121;
	    font-size: .28em;
	    line-height: 1;
	}
	.list ul li{
		position: relative;
	    overflow: hidden;
	    padding: .2rem 0;
	}
	.left{
	    float: left;
	    overflow: hidden;
	    width: 2rem;
	    height: 2rem;
	    background: #f0f5f8;
	}
	.right{
		overflow: hidden;
    	padding-left: .22rem;
	}
	.right_top{
		    margin-top: .26rem;
    height: .44rem;
    color: #212121;
    font-size: .32rem;
    line-height: .44rem;
        overflow: hidden;
    width: 100%;
    white-space: nowrap;
    text-overflow: ellipsis;
	}
	.right_bottom{
    position: relative;
    margin-top: .22rem;
    color: #616161;
    font-size: .24rem;
    line-height: .4rem;
	}
	.right_bottom_1 i{
    color: #ff8300;
	}
	.right_bottom_2{
position: absolute;
    right: .24rem;
    bottom: 0;
	}
	
</style>